<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .liStyle{
            color: red;
            text-decoration: line-through;
        }
        li{
            cursor: pointer;
        }
        .btnStyle{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>todulist_组件化写法</h1>
        <!-- 头部组件 -->
        <header-cpn @add="addData"></header-cpn>
        <!-- 头部组件 -->
        <ul>
            <li 
                v-for="(item,index) in list" 
                :key="index" 
                :class="item.status ? 'liStyle' : '' "
                @click="changeLi(index)"
                v-show="liStatus === 'all' ? true : liStatus === 'finished' ? item.status : !item.status "
                >
                {{ item.name }}
            </li>
        </ul>
        <!-- 尾部组件 -->
        <footer-cpn @getdata="getStatus"></footer-cpn>
        <!-- 尾部组件 -->
    </div>



    <script src="../js/vue.js"></script>
    <template id="headerCpn">
        <div>
            <label for="">
                <input type="text" v-model="inputData">
            </label>
            <button @click="add">添加</button>
        </div>
    </template>
    <template id="footerCpn">
        <div>
            <button 
                v-for="(item,index) in btnList" 
                :key="index" @click="changeBtn(index)"
                :class="item.status ? 'btnStyle' : '' "
                >
                {{ item.name }}
            </button>
        </div>
    </template>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return{
                    list:[
                        {
                            name:'吃饭',
                            status:true
                        },
                        {
                            name:'睡觉',
                            status:false
                        },
                        {
                            name:'打豆豆',
                            status:false
                        }
                    ],
                    liStatus:'all'
                }
            },
            methods:{
                addData(val){
                    // 既然拿到了数据 是不是应该push进我们的展示数组
                    this.list.push({
                        name:val,
                        status:false
                    })
                },
                changeLi(i){
                    this.list[i].status = !this.list[i].status
                },
                getStatus(val){
                    this.liStatus = val
                }
            },
            components:{
                'header-cpn':{
                    template:'#headerCpn',
                    data(){
                        return {
                            inputData:''
                        }
                    },
                    methods:{
                        add(){
                            if(this.inputData.length > 0){
                                this.$emit('add',this.inputData)
                                this.inputData = ''
                            }
                        }
                    }
                },
                'footer-cpn':{
                    template:'#footerCpn',
                    data(){
                        return {
                            btnList:[
                                {
                                    name:'全部',
                                    status:true
                                },
                                {
                                    name:'已完成',
                                    status:false
                                },
                                {
                                    name:'未完成',
                                    status:false
                                },
                            ]
                        }
                    },
                    methods:{
                        changeBtn(i){
                            this.btnList.map(item => item.status = false)
                            this.btnList[i].status = true
                            let btnStatus = null
                            if(i === 0){
                                btnStatus = 'all'
                            }else if(i === 1){
                                btnStatus = 'finished'
                            }else{
                                btnStatus = 'unfinished'
                            }
                            this.$emit('getdata',btnStatus)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>